<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content" style="height: 150px;line-height: 150px;text-align:center;color: #fff;background: #ccc;font-size: 80px"></div>
<script>
    let num = 1;

    let content = document.getElementById("content");
    content.innerHTML = num;
    function count(){
        content.innerHTML = num++;
    }
    // content.onmousemove = count;
    //防抖（debounce）
    //所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
    //非立即执行版
    //非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
    // function debounce(func,wait) {
    //     let timeout;
    //     return function () {
    //         let context = this;
    //         let args = arguments;
    //
    //         if (timeout) clearTimeout(timeout);
    //
    //         timeout = setTimeout(() => {
    //             func.apply(context, args)
    //         }, wait);
    //     }
    // }

    //立即执行版的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。
    // function debounce(func,wait){
    //     let timeout;
    //     return function () {
    //         let context = this;
    //         let args = arguments;
    //         if(timeout) clearTimeout(timeout);
    //         let callNow = !timeout;
    //
    //         timeout = setTimeout(()=>{
    //             timeout = null;
    //         },wait);
    //         if(callNow) func.apply(context,args);
    //     }
    // }

    //immediate为立即执行版
    // function debounce(func,wait,immediate){
    //     let timeout;
    //     return function () {
    //         let context = this;
    //         let args = arguments;
    //         if(timeout) clearTimeout(timeout);
    //         if(immediate){
    //             let callNow = !timeout;
    //             timeout = setTimeout(() => {
    //                 timeout = null;
    //             },wait);
    //             if(callNow) func.apply(context,args);
    //         }else{
    //             timeout = setTimeout(()=>{
    //                 func.apply(context,args);
    //             },wait);
    //         }
    //     }
    // }
    //content.onmousemove = debounce(count,1000,true);
    //节流（throttle）
    //所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。
    //对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。
    //时间戳版
    // function throttle(func,wait) {
    //     let previous = 0;
    //     return function () {
    //         let now = new Date();
    //         let context = this;
    //         let args = arguments;
    //         if(now - previous > wait){
    //             func.apply(context,args);
    //             previous = now;
    //         }
    //     }
    // }
    //定时器版
    // function throttle(func, wait) {
    //     let timeout;
    //     return function() {
    //         let context = this;
    //         let args = arguments;
    //         if (!timeout) {
    //             timeout = setTimeout(() => {
    //                 timeout = null;
    //                 func.apply(context, args)
    //             }, wait)
    //         }
    //     }
    // }
    content.onmousemove = throttle(count, 1000);

</script>
</body>
</html>